<template>
  <div class>
    <!-- 搜索 -->
    <SxFilterSearch
      v-bind="sx_mark([name,'search'])"
      :form-fields="search.list"
      :select-options-list="selectOptionsList"
      @search="handleSearch"
      @reset="handleResetSearch"
    />
    <!-- 表格 -->
    <SxTable
      row-id="_XID"
      v-bind="sx_mark([name,'table'])"
      :button-list="buttonGroup"
      :highlight-current-row="false"
      :height="config.height"
      :tool-width="300"
      :tool-permission="toolPermission"
      :columns="config.tableData.columns"
      :table-params="search.params"
      :request-method="actgetDefinitions"
      :loading="config.loading"
      tool-fixed="right"
      :selection-type="selectType"
      :checkbox-config="{ reserve: selectType ? true : false }"
    >
      <template v-slot:tool="scope">
        <div class="tool_handle">
          <el-button
            plain
            :size="$store.getters.size"
            class="scale_9"
            type="success"
            @click="handleVFormRender(scope)"
          >发起审批</el-button>
          <el-button
            plain
            :size="$store.getters.size"
            class="scale_9"
            type="primary"
            @click="handleEdit(scope)"
          >编辑流程</el-button>
          <el-button
            plain
            :size="$store.getters.size"
            type="danger"
            class="scale_9"
            @click="handleDelConfirm(scope)"
          >删除</el-button>
        </div>
      </template>
    </SxTable>
    <!-- 弹窗 -->
    <SxDialog
      :title="storeDialog.title"
      :width="storeDialog.width"
      :min-height="storeDialog.height"
      :visible="storeDialog.visible"
      @dialog-close="handleAddCancel"
      @dialog-cancel="handleAddCancel"
      @dialog-confirm="handleAddConfirm"
    >
      <!-- tab -->
      <SxTabs
        v-model="tableTab.activeName"
        v-bind="sx_mark([name,'SxTabs'])"
        :tabs-list="tableTab.list"
      ></SxTabs>
      <div class="SxDialogTemplate" v-show="tableTab.activeName == 'activitiEdit'">
        <activitiEdit
          v-if="storeDialog.visible"
          v-bind="sx_mark([name,'activitiEdit'])"
          style="height:100%"
          @init-finished="initModeler"
        ></activitiEdit>
      </div>
      <div class="SxDialogTemplate" v-show="tableTab.activeName == 'activitiForm'">
        <activitiForm
          v-if="storeDialog.visible"
          v-bind="sx_mark([name,'activitiForm'])"
          style="height:100%"
        ></activitiForm>
      </div>
    </SxDialog>

    <SxDialog
      :title="VFormRender.title"
      :width="VFormRender.width"
      :min-height="VFormRender.height"
      :visible="VFormRender.visible"
      @dialog-close="handleVFormRenderCancel"
      @dialog-cancel="handleVFormRenderCancel"
      @dialog-confirm="handleVFormRenderConfirm"
    >
      <div class="VFormRender">
        <VFormRender
          v-bind="sx_mark([name,'VFormRender'])"
          :form-json="VFormRender.formJson"
          :form-data="VFormRender.formData"
          :preview-state="true"
          :option-data="VFormRender.optionData"
        ></VFormRender>
      </div>
    </SxDialog>
  </div>
</template>

<script>
import {
  actgetDefinitions,
  actreadResource,
  actinitDeploymentBPMN,
  actTaskControllerstart,
  actdelDeploymentBPMN
} from "@/api/api";
import { GetXMLNodeProperty } from "@/utils";
import VFormRender from "@Form/components/form-render/index";
import SxTable from "@Components/Table";
import SxTabs from "@Components/Tabs";
import SxDialog from "@Components/Dialog";
import SxFilterSearch from "@Components/Search";
import SxButtonGroup from "@Components/ButtonGroup";
import SxForm from "@Components/Form";
import activitiEdit from "@Bpmn/App.vue";
import activitiForm from "@Form/App.vue";
import config from "./config.js";
import throttleResize from "@Components/assets/js/utils/throttleResize";
export default {
  props: {
    height: {
      type: String,
      default: null
    },
    // 单选还是多选 radio checkbox
    selectType: {
      type: String,
      default: "checkbox"
    }
  },
  mixins: [throttleResize],
  components: {
    SxFilterSearch,
    SxTable,
    SxDialog,
    SxTabs,
    SxForm,
    SxButtonGroup,
    activitiEdit,
    activitiForm,
    VFormRender
  },
  data() {
    return {
      ...config.call(this)
    };
  },
  methods: {
    actgetDefinitions,
    // 搜索事件
    handleSearch(data) {
      this.search.params = { ...this.search.params, ...data };
      this.$refs[`${this.name}_table`].refreshTable();
    },
    // 重置搜索
    handleResetSearch(data) {
      this.$refs[`${this.name}_table`]._clearFilter();
      this.handleSearch(data);
    },
    // 开启弹窗
    handleStoreDialog() {
      this.storeDialog.title = "新增";
      this.storeDialog.visible = true;
    },
    // 关闭弹窗
    handleAddCancel() {
      this.storeDialog.visible = false;
      this.storeDialog.formData = {};
    },
    handleVFormRenderCancel() {
      this.VFormRender.visible = false;
    },
    //编辑信息
    async handleEdit(scope) {
      this.storeDialog.title = "编辑";
      let res = await actreadResource({
        pdid: scope.row.deploymentId,
        resourceName: scope.row.resourceName
      });
      //   this.storeDialog.formData = data;
      this.storeDialog.visible = true;
      this.$nextTick(async () => {
        this.$refs[`${this.name}_activitiEdit`].init(res);
        this.$refs[`${this.name}_activitiEdit`].bpmnRow = scope.row;
      });
    },
    initModeler(modeler) {
      this.$refs[`${this.name}_activitiForm`].init(modeler);
    },
    // 删除信息
    async handleDelConfirm(scope) {
      let proxyConfig = {
        key: "deploymentId",
        api: actdelDeploymentBPMN
      };
      let confirmConfig = {
        title: "是否要删除选中的流程?"
      };
      if (scope) proxyConfig.params = scope.row;
      this.$refs[`${this.name}_table`].handleDelete({
        proxyConfig,
        confirmConfig
      });
    },
    async GetParam() {
      // 表单
      let { formConfig, widgetList } = await this.$refs[
        `${this.name}_activitiForm`
      ].getFormJson();
      this.$refs[`${this.name}_activitiEdit`].updateForm(widgetList);
      // 流程
      let param = await this.$refs[
        `${this.name}_activitiEdit`
      ].previewProcessXML();
      return param;
    },
    async handleAddConfirm() {
      if (this.storeDialog.title == "编辑") {
        return this.handleEditConfirm();
      }
      let param = await this.GetParam();
      if (!param)
        return this.$showMessage({
          type: "warning",
          message: "保存出现异常,请联系管理员"
        });
      let { code, msg } = await actinitDeploymentBPMN(param);
      if (code) {
        this.$showMessage({ type: "success", message: msg });
        this.$refs[`${this.name}_table`].refreshTable(true);
        this.handleAddCancel();
      }
    },
    // 开启弹窗
    handleVFormRenderDialog(name) {
      this.VFormRender.title = name;
      this.VFormRender.visible = true;
    },
    async handleVFormRender(scope) {
      let res = await actreadResource({
        pdid: scope.row.deploymentId,
        resourceName: scope.row.resourceName
      });
      this.VFormRender.formJson = {
        formConfig: {
          cssCode: "",
          customClass: "",
          functions: "",
          labelAlign: "label-left-align",
          labelPosition: "left",
          labelWidth: 80,
          layoutType: "PC",
          modelName: "formData",
          onFormCreated: "",
          onFormDataChange: "",
          onFormMounted: "",
          refName: "vForm",
          rulesName: "rules",
          size: ""
        },
        widgetList: GetXMLNodeProperty(res)
      };
      this.bpmnRow = scope.row;
      this.handleVFormRenderDialog(scope.row.name);
    },
    async handleVFormRenderConfirm() {
      try {
        const formData = await this.$refs[
          `${this.name}_VFormRender`
        ].getFormData();
        let formDataParam = [];
        Object.keys(formData).forEach(i => {
          formDataParam.push({
            label: i,
            value: formData[i]
          });
        });
        let params = {
          id: this.bpmnRow.key,
          formData: formDataParam
        };
        let { msg } = await actTaskControllerstart(params);
        this.$showMessage({ type: "success", message: msg });
        this.handleVFormRenderCancel();
      } catch (error) {
        console.log(error);
      }
    },
    async handleEditConfirm() {
      let param = await this.GetParam();
      if (
        !param ||
        !this.$refs[`${this.name}_activitiEdit`].bpmnRow?.deploymentId
      )
        return this.$showMessage({
          type: "warning",
          message: "保存出现异常,请联系管理员"
        });
      let { code, msg } = await actinitDeploymentBPMN(param);
      if (code) {
        await actdelDeploymentBPMN(
          this.$refs[`${this.name}_activitiEdit`].bpmnRow.deploymentId
        );
        this.$showMessage({ type: "success", message: msg });
        this.$refs[`${this.name}_table`].refreshTable(true);
        this.handleAddCancel();
      }
    }
  }
};
</script>


<style lang="scss" scoped>
.SxDialogTemplate {
  height: calc(100% - 60px);
}
/deep/ .btn-tabs {
  padding-top: 5px;
}
.VFormRender {
  width: 95%;
  padding: 2.5%;
}
</style>
